forum

home / developersection / forums / create checkbox, select, radio button, toggle switch with bootstrap library

Ask Question

Create checkbox, select, radio button, toggle switch with Bootstrap library

Ethan Karla 370 28-Jul-2021

How to create checkbox, select, radio button, toggle switch with bootstrap library?
bootstrap bootstrap 
Updated on 28-Jul-2021
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

03-Aug-2021

To make a checkbox, select, radio button, toggle switch with Bootstrap library see the below example: 

<html lang='en'>

<head>

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>

    <title>Bootstrap Dropdown</title>

    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>

</head>

<body>

    <div class='container d-flex justify-content-center flex-column'>

        <form class='row g-3'>

            <div class='col-md-4'>

                <div class='form-check'>

                    <input class='form-check-input' type='checkbox' value='' id='flexCheckDefault'>

                    <label class='form-check-label' for='flexCheckDefault'>

                        Checkbox

                    </label>

                </div>

            </div>

            <div class='col-md-4'>

                <select class='form-select' aria-label='Default select example'>

                    <option selected>Select Gender</option>

                    <option value='1'>Male</option>

                    <option value='2'>Female</option>

                    <option value='3'>Transgender</option>

                </select>

            </div>

            <div class='col-md-4'>

                <div class='form-check'>

                    <input class='form-check-input' type='radio' name='flexRadioDefault' id='flexRadioDefault1'>

                    <label class='form-check-label' for='flexRadioDefault1'>

                        Radio

                    </label>

                </div>

            </div>

            <div class='col-md-4'>

                <div class='form-check form-switch'>

                    <input class='form-check-input' type='checkbox' id='flexSwitchCheckDefault'>

                    <label class='form-check-label' for='flexSwitchCheckDefault'>Toggle Button</label>

                </div>

            </div>

        </form>

    </div>

</body>

</html>

Hope this will help you.

Happy Coding!

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy